<template>
	<div class="slideShow2">
		<div>
			<a @click="prev()">向左</a>
			<a @click="next()">向右</a>
		</div>
		<div id="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
			<ul ref="mybox">
				<!--<li ref="myli">
					<img src="../assets/1.jpg">
					<p style="position: absolute;top: 10px; color: red;">123</p>
				</li>
				<li>
					<img src="../assets/2.jpg">
					<p style="position: absolute;top: 10px; color: red;">123</p>
				</li>
				<li>
					<img src="../assets/3.jpg">
					<p style="position: absolute;top: 10px; color: red;">123</p>
				</li>
				<li>
					<img src="../assets/4.jpg">
					<p style="position: absolute;top: 10px; color: red;">123</p>
				</li>-->

				<li v-for="(img,index) in imgArray">
					<p>{{img.Id}}</p>
					<img :src="img.src" alt="">
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'slideShow2',
		data() {
			return {
				speed: -5,
				imgArray: [
					{"src": require('../assets/1.jpg'),'Id':'这是第壹张'},
					{"src": require('../assets/2.jpg'),'Id':'这是第贰张'},
					{"src": require('../assets/3.jpg'),'Id':'这是第叁张'},
					{"src": require('../assets/4.jpg'),'Id':'这是第肆张'},
					{"src": require('../assets/5.jpg'),'Id':'这是第五张'},
				],
			}
		},
		mounted() {
			const OLi = this.$refs.mybox.getElementsByTagName("li");
			this.$refs.mybox.innerHTML = this.$refs.mybox.innerHTML + this.$refs.mybox.innerHTML;
			this.$refs.mybox.style.width = OLi[0].offsetWidth * OLi.length + "px"
		},
		methods: {
			autoPlay() {
				if(this.$refs.mybox.offsetLeft < -this.$refs.mybox.offsetWidth / 2) {
					this.$refs.mybox.style.left = "0";
				}
				if(this.$refs.mybox.offsetLeft > 0) {
					this.$refs.mybox.style.left = -this.$refs.mybox.offsetWidth / 2 + "px";
				}
				this.$refs.mybox.style.left = this.$refs.mybox.offsetLeft + this.speed + "px";
			},
			play() {
				this.timer = setInterval(this.autoPlay, 30)
			},
			stop() {
				clearInterval(this.timer)
			},
			move() {
				this.timer = setInterval(this.autoPlay, 30)
			},
			prev() {
				this.speed = -5;
			},
			next() {
				this.speed = 5;
			}

		},
		created() {
			this.play()
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#slide {
		width: 800px;
		height: 130px;
		margin: 100px auto;
		position: relative;
		overflow: hidden;
	}
	
	#slide ul {
		position: relative;
		left: 0;
		top: 0;
	}
	
	#slide ul li {
		float: left;
		width: 200px;
		height: 130px;
		cursor: pointer;
	}
	
	.slideShow2 a {
		margin-left: 240px;
		font-size: 20px;
		color: orange;
		font-family: 微软雅黑;
		cursor: pointer;
	}
	
	.slideShow2 {
		margin-top: 100px;
	}
	
	p {
		position: absolute;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: rgba(237,84,48,.7);
		opacity: 0;
		text-align: center;
		line-height: 80px;
	}
	
	#slide ul li:hover p {
		transition: all 1s;
		opacity: 1;
	}
</style>